<template>
    <div class="clickNumber-wrap">
      <div id="activity-number">0</div>
    </div>
  </template>
  
  <script>
    import { CountUp } from 'countup.js'; // 数字翻滚效果
    import fun from "@/util/function";
    export default {
      name: "ClickNumber",
      components: {
  
      },
      props: {
        roomInfo: Object,
      },
      data() {
        return {
          _activityNumber: 0,
          _countUpInstance: null,
          _onceNumber: 0, // 单词点赞次数
        }
      },
      mounted() {
        this._activityNumber = this.roomInfo.likeCount || 0;
        this._onceNumber = 0;
        // target, startVal, endVal, decimals, duration, options
        // dom节点, 初始值,  结束值, 小数位数, 过渡几秒 , 初始参数
        this._countUpInstance = new CountUp("activity-number", this._activityNumber, {
          useGrouping: false,
        });
        this._countUpInstance.start();
        // 供socket中love事件调用
        this.$EventBus.$on('triggerFloatIcon', num => this.increaseNumber(num));
      },
      methods: {
        increaseNumber(num, mark) {
          if (!mark && num < this._activityNumber) return false; // socket数据小于本地数据跳过increase
          // 传入num，则新增指定number，否则+1
          this._activityNumber += (mark ? num : num - this._activityNumber);
          if (this._activityNumber > 9999) {
            document.querySelector('#activity-number').innerText = (this._activityNumber / 10000).toFixed(1) + "w";
          } else {
            this._countUpInstance.update(this._activityNumber);
          }
          // mark标识本人点击（停止操作3s后上送点赞数据）
          if (mark) {
            clearTimeout(this.timeId);
            this._onceNumber += 1;
            this.timeId = setTimeout(() => {
              const { roomid, id } = this.$route.params
              let params = {
                roomId: roomid,
                vid: id,
                num: this._onceNumber,
                plat: fun.getPlatform(),
              };
              this.$http.post(`/h5live/${roomid ? 'room' : 'video'}/like`, this.$qs.stringify(params)).then(
                res => {
                  console.log("like res", res)
                  this._onceNumber = 0;
                }, 
                err => {
                  console.log("like err", err);
                }
              );
            }, 3000);
          }
        }
      }
    };
  </script>
  
  <style lang="less" scoped>
    .clickNumber-wrap {
      position: absolute;
      top: 0;
      right: 22px;
      transform: translate(50%, -50%);
      padding: 4px;
      font-size: 18px;
      color: #fff;
      background: #FF1D1D;
      border-radius: 12px;
      transition: width .5s;
    }
  </style>